<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>




		<scroll-view scroll-y="true" class="ContentScroll"  :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollInner">
				<view class="contentCenter">


					<text class="contentCenterTopTitle">发送内容</text>

					<!-- 分扎信息内容列表  start-->
					<view class="content_gongxu">

						<view @click="Fenzha(item)" class="listContentGongxu" v-for="(item,index) in listDataFenzha">




							<view class="contentItem" v-if="item.type==0">

								<view class="contentItemTextLeftContent">
									<text class="contentItemTextLeft">{{item.title}}</text>
									<text class="contentItemTextLeftStart">*</text>
								</view>
								<input class="contentItemTextRight" type="text" :value="item.Value" />


							</view>

							<view class="contentItem" v-if="item.type==4">

								<view class="contentItemTextLeftContent">
									<text class="contentItemTextLeft">{{item.title}}</text>
									<text class="contentItemTextLeftStart">*</text>
								</view>
								<image class="contentItemTextLeftStartImg"
									src="../../../static/gongzuotai/shanchu-red@2x.png" mode=""></image>


							</view>


							<view class="contentItem2" v-if="item.type==1">

								<view class="contentItemTextLeftContent">
									<text class="contentItemTextLeft">{{item.title}}</text>
									<text class="contentItemTextLeftStart">*</text>
								</view>
								<input class="contentItemTextRight" type="text" :value="item.Value" />

							</view>



							<view class="contentItem2" v-if="item.type==2">

								<view class="contentItemTextLeftContent">
									<text class="contentItemTextLeft">{{item.title}}</text>
									<text class="contentItemTextLeftStart">*</text>
								</view>

								<view class="contentItemRightContent">
									<text class="contentItemTextLeft">{{item.Value}}</text>
									<image class="contentItemRightContentImg"
										src="/static/gongzuotai/xia_jiantou@2x.png" mode="">
									</image>
								</view>

							</view>


							<view class="line"></view>

						</view>


					</view>
					<!-- 分扎信息内容列表  end-->

					<text class="contentCenterTopTitle">选择打印机（8）</text>

					<view class="contentCenterTopCenter">

						<view class="contentCenterTopCenterLeft" @click="allSelectClick()">
							<image src="../../../static/gongzuotai/yuanxing_gouxuan@2x.png"
								class="contentCenterTopCenterLeftImg1" mode="" v-show="allSelect==true"></image>

							<text class="contentCenterTopCenterLeftImg" v-show="allSelect==false"></text>
							<text class="contentCenterTopCenterLeftText">全选</text>
						</view>

						<view class="contentCenterTopCenterRight">
							<text class="contentCenterTopCenterRightBlack">已选</text>
							<text class="contentCenterTopCenterRightBlue">2</text>
							<text class="contentCenterTopCenterRightBlack">台</text>
						</view>
					</view>




					<!-- 列表开始 -->
					<view class="listContent">





						<view class="listContentItem" v-for="(item,index) in deviceList"
							@click="deviceListItemClick(item,index)">
							<image src="../../../static/gongzuotai/yuanxing_gouxuan@2x.png"
								class="contentCenterTopCenterLeftImg1" mode="" v-show="item.select==true"></image>

							<text class="contentCenterTopCenterLeftImg" v-show="item.select==false"></text>
							<text class="contentCenterTopCenterLeftText">{{item.title}}</text>

						</view>




					</view>
					<!-- 列表结束 -->



				</view>
			</view>
		</scroll-view>


		<view class="loginContent"  id="mainBottom">

			<button style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	
	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				login: '确定发送',

				title: '发送到打印机',

				isback: true,
				// 全选 默认false

				allSelect: false,


				// 设备选择数量
				deviceSelectNum: 0,





				// 设备列表
				deviceList: [{
						title: '打印机GP-9024D',
						select: false
					},
					{
						title: 'Bluetooth-2684',
						select: false
					},
					{
						title: '打印机GP-9024D',
						select: false
					},
					{
						title: 'Bluetooth-2684',
						select: false
					},
					{
						title: '打印机GP-9024D',
						select: false
					},
					{
						title: '打印机GP-9024D',
						select: false
					},
					{
						title: '我要吃个大西瓜hgiksdlahfiq',
						select: false
					},
					{
						title: '我要吃个大西瓜hgiksdlahfiq',
						select: false
					}

				],


				// 分扎信息列表
				listDataFenzha: [

					{
						title: '扎号1',
						Value: '',
						type: 4
					},
					{
						title: '数量',
						Value: '123456',
						type: 0
					},
					{
						title: '尺码大小',
						Value: '请选择',
						type: 2
					},

					{
						title: '颜色外观',
						Value: '请选择',
						type: 2
					},
					{
						title: '床号批次',
						Value: '请填写',
						type: 1
					}

				],
				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
			}
		},
		
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
		
		
			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);
				const app = getApp();
		
				this.scrollViewHeight = this.bottomTop - app.globalData.totalHeight
				// console.log('可滚动距离', this.scrollViewHeight,this.bottomTop,app.globalData.totalHeight);
			}).exec();
		
		
		
		},
		methods: {

			// 全选点击事件

			allSelectClick() {

				this.allSelect = !this.allSelect;

				this.deviceList.forEach((item, index) => {

					if (this.allSelect == true) {
						this.deviceList[index].select = true

					} else {
						this.deviceList[index].select = false

					}
				});

			},

			// 列表点击事件
			deviceListItemClick(e, index) {
				this.deviceSelectNum=0

				this.deviceList[index].select = !this.deviceList[index].select

				this.deviceList.forEach((item, index) => {

					if (item.select == true) {
						this.deviceSelectNum = this.deviceSelectNum + 1
					}

				});
				console.log('已选数量',this.deviceList.length,this.deviceSelectNum);
				if (this.deviceList.length == this.deviceSelectNum) {
					this.allSelect = true;
				} else {
					this.allSelect = false;
				}

			}


		}
	}
</script>

<style lang="scss">
	.listContentItem {
		display: flex;
		justify-content: left;
		flex-direction: row;
		align-items: center;
		height: 120rpx;
		width: 100%;
		margin-left: 40rpx;
		border-bottom: #F5F7F9 solid 1rpx;
	}

	.listContent {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

	}

	.contentCenterTopCenterRightBlue {

		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 36rpx;
		color: blue;
		line-height: 30rpx;
	}

	.contentCenterTopCenterRightBlack {

		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 30rpx;
	}


	.contentCenterTopCenterRight {

		display: flex;
		margin-right: 30rpx;

	}

	.contentCenterTopCenterLeftText {

		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 30rpx;
		margin-left: 30rpx;
	}

	.contentCenterTopCenterLeftImg {

		width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		border: 2px solid #999999;
	}

	.contentCenterTopCenterLeftImg1 {

		width: 30rpx;
		height: 30rpx;


	}

	.contentCenterTopCenterLeft {
		display: flex;

		margin-left: 30rpx;

	}


	.contentCenterTopCenter {

		display: flex;
		justify-content: space-between;

		align-items: center;
		width: 100%;

		margin-top: 30rpx;



	}


	.content_gongxu {
		width: 630rpx;

		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-bottom: 30rpx;
		margin-top: 30rpx;


	}



	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemTextLeftStartImg {
		width: 30rpx;
		height: 30rpx;
		margin-right: 30rpx;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 120rpx;


		/* background-color: aqua; */
	}



	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 120rpx;

		border-radius: 30rpx 30rpx 0 0;
		/* background-color: aqua; */

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: bisque; */
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItem3 {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		width: 100%;
		height: 120rpx;

	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.listContentGongxu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		background: #F5F7F9;
		border-radius: 30rpx;



	}


	.contentCenterTopTitle {

		display: flex;
		justify-content: left;
		align-items: center;

		margin-top: 30rpx;
		margin-left: 30rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;


		width: 100%;
	}

	.ContentScrollInner {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 100%;

	}

	.ContentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		height: 1000rpx;
		width: 100%;

	}

	.contentCenter {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 30rpx;

		width: 690rpx;
	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}


	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
			
		position: absolute;
		bottom: 30rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
	


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}
</style>